<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>你好世界</title>
		<link rel="stylesheet" href="css/mytable.css" />
		<style>
			a:link,
			a:visited {
				display: block;
				font-weight: bold;
				color: #FFFFFF;
				background-color: #98bf21;
				width: 120px;
				text-align: center;
				padding: 4px;
				text-decoration: none;
			}
			
			a:hover,
			a:active {
				background: #CCEECC;
			}
			
			div.img_style {
				background-image: url('img/cat.jpg');
				background-position: left top;
				width: 800px;
				height: 500px;
				margin: 10px;
				border: 10px solid orangered;
				background-repeat: no-repeat;
			}
			
			.fixed {
				position: fixed;
				top: 30%;
				right: 10%;
			}
			
			.relative {
				position: relative;
				left: 10%;
			}
			
			p span {
				float: left;
				width: 1.2em;
				font-size: 400%;
				font-family: algerian, courier;
				line-height: 80%;
			}
			.h-center{
				width: 50%;
				margin: auto;
				background-color: cornflowerblue;
				color: white;
				border: 1px solid darkblue;
				text-align: center;
				padding: 10px;
			}
			.h-left{
				width: 50%;
				position: absolute;
				left: 0;
				text-align: center;
				padding: 10px;
				background-color: cornflowerblue;
				color: white;
			}
			.h-right{
				width: 50%;
				position: absolute;
				right: 0;
				text-align: center;
				padding: 10px;
				background-color: cornflowerblue;
				color: white;
			}
			.container{
				position: relative;
				margin-top: 50px;
				border: 2px solid orangered;
				width: 40%;
				height: 300px;
			}
			.container p{
				color: coral;
				margin: 0;
				position: absolute;
				top: 50%;
				left: 50%;
				-ms-transform: translate(-50%, -50%);
    			transform: translate(-50%, -50%);
			}
			.before-after:before{
				content: '内容之前加入：';
			}
			.before-after:after{
				content: '内容之后加入：';
			}
		</style>
	</head>

	<body>
		<h1 style="background-color: #333333;">这是我的标题</h1>
		<a href="https://www.baidu.com">百度</a>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr class="light">
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			<tr class="dark">
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			<tr class="light">
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			<tr class="dark">
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
		</table>
		<div class="img_style"></div>
		<div class="fixed">fixed text</div>
		<div class="relative">ralative element</div>
		<p>
			<span>这</span> 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本本是一些文本是一些文本 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本本是一些文本是一些文本 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本本是一些文本是一些文本 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本是一些文 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本 是一些文本是一些文本是一些文本是一些文本是一些文本是一些文本本是一些文本是一些文本
		</p>
		<a class="clear:both" />
		<div class="h-center">这是一段文字，它应该水平居中</div>
		<div class="h-left">这是一段文字，它应该左对齐</div>
		<div class="h-right">这是一段文字，它应该右对齐</div>
		<div class="container">
			<p>居中显示的文字</p>
		</div>
		<a href="https://www.baidu.com">百度</a>
		<span class="before-after">之前之后</span>
	</body>

</html>